<template>
	<div style="height: 60%">
		<div class="main main-r-n c-l-b">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<div class="main-border">
				<div class="disFlexItem m-b-12">
					<div class="tit" style="margin-left: 20px; margin-top: 20px">实时预警监测</div>
					<div>
						<img style="margin-top: 23px" src="../assets/img/left.png" alt="" srcset="" />
					</div>
				</div>
				<table class="tablebox" ref="table" cellspacing="0">
					<thead class="thead-fixed">
						<tr>
							<th class="timeAll">预警时间</th>
							<th class="event">预警事件</th>
							<th class="centets2">预警来源</th>
							<th class="centets1">预警内容</th>
						</tr>
					</thead>
				</table>
				<div class="table-wrapper">
					<vue-seamless-scroll :data="warnings" @click.native="handleClick($event)" :class-option="classOption" class="table-wrappers" v-if="warnings.length > 0">
						<table class="tablebox" ref="table" cellspacing="0">
							<thead style="height: 0px">
								<tr style="height: 0px">
									<th style="height: 0px; line-height: 0px" class="timeAll"></th>
									<th style="height: 0px; line-height: 0px" class="event"></th>
									<th style="height: 0px; line-height: 0px" class="centets2"></th>
									<th style="height: 0px; line-height: 0px" class="centets1"></th>
								</tr>
							</thead>
							<tbody>
								<!--    @click="
                    roomIds1(item.roomId, item.custId, item.orgId, item.date)
                  " -->
								<tr
									v-for="(item, index) in warnings"
									:key="index"
									:class="{
										'orange-s': item.level == 1,
										'red-s': item.level >= 3,
										'yellow-s': item.level == 2
									}"
								>
									<td :data-obj="JSON.stringify(item)" class="events1">
										{{ item.date | filterDateTime }}
									</td>
									<td :data-obj="JSON.stringify(item)" :title="item.eventName" class="events">
										{{ item.eventName }}
									</td>
									<td :data-obj="JSON.stringify(item)" class="events1">
										{{ item.source | filterType }}
									</td>
									<td :title="item.content" :data-obj="JSON.stringify(item)" class="events1 events">
										{{ item.content }}
									</td>
								</tr>
							</tbody>
						</table>
					</vue-seamless-scroll>

					<div v-if="warnings.length == 0" style="height: 90%; display: flex; color: rgb(151 151 151); align-items: center; justify-content: center">暂无预警</div>
				</div>
			</div>
		</div>

		<div>
			<!--        :roomids="roomids"
        :custId="custId"
        :status="status"
        :date="date" -->
			<diaolog v-if="diaologStatus" :diaologStatus="diaologStatus" @diaologCencel="diaologCencel" @brush="brush" />
		</div>
	</div>
</template>

<script>
import diaolog from './diaolog.vue';
import { getwarning } from '../src/api/rights';
import vueSeamlessScroll from 'vue-seamless-scroll';
import socketService from '../sokect/index';
export default {
	components: {
		diaolog,
		vueSeamlessScroll
	},
	data() {
		return {
			isScrolling: true, // 控制是否滚动的状态标志
			diaologStatus: false,
			totalHeight: '',
			roomids: '',
			warnings: [],
			custId: '',
			status: '',
			socketServices: null,
			date: ''
		};
	},
	mounted() {
		//告警数据
		this.getwarnings();
		this.startSocket();
	},
	computed: {
		classOption() {
			return {
				step: 0.6, // 数值越大速度滚动越快
				limitMoveNum: this.warnings.length >= 20 ? this.warnings.length : 20, // 开始无缝滚动的数据量 this.dataList.length
				hoverStop: true, // 是否开启鼠标悬停stop
				direction: 1, // 0向下 1向上 2向左 3向右
				openWatch: false, // 开启数据实时监控刷新dom
				singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
				singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
				waitTime: 200 // 单步运动停止的时间(默认值1000ms)
			};
		}
	},
	methods: {
		brush() {
			this.getwarnings();
		},
		// 调用 getMessage 方法，并传递回调函数来处理数据

		startSocket() {
			socketService.init('warning-all');
			socketService.getMessage((data) => {
				// 在回调函数中处理 msg.data
				console.log('Received data:', data);
				this.getwarnings();
			});
		},
		// 	try {
		// 		socketService.init('warning-all');
		// 		const msg = await socketService.getMessage();
		// 		console.log('msgmsgmsgmsg', msg);
		// 		// if (msg == '心跳') return;
		// 		if (msg) {
		// 			console.log('msg12121', msg);
		// 			setTimeout(() => {
		// 				this.getwarnings();
		// 			}, 200);
		// 		}
		// 		// this.warnings.push(JSON.parse(msg.data));
		// 		// this.$store.dispatch("smessyjListasyn", this.warnings.length);
		// 	} catch (error) {
		// 		console.error('Error receiving message:', error);
		// 	}
		diaologCencel(e) {
			this.diaologStatus = false;
		},

		// 处理告警信息
		// roomIds1(roomid, custId, saveorgId, date) {
		//   console.log("1212");
		//   this.roomids = roomid;
		//   this.custId = custId;
		//   this.date = date;
		//   this.$store.commit("saveorgId", saveorgId);
		//   this.diaologStatus = true;
		// },
		handleClick($event) {
			const headId = JSON.parse($event.target.dataset.obj);
			let dataObj = {
				roomids: headId.roomId,
				custId: headId.custId,
				date: headId.date,
				status: headId.status
			};

			this.$store.commit('saveRealTime', dataObj);
			// this.roomids = headId.roomId;
			// this.custId = headId.custId;
			// this.date = headId.date;
			// this.status = headId.status;
			this.$store.commit('saveorgId', headId.orgId);
			if (dataObj.custId == 0) {
				this.$message({
					message: '暂无信息',
					type: 'warning'
				});
			} else {
				this.diaologStatus = true;
			}
		},
		// 获取所有的告警数据
		async getwarnings() {
			console.log('进来');
			let res = await getwarning({
				custId: '',
				status: 1,
				startTime: this.$getFormattedDate(),
				endTime: this.$getFormattedDate() + ' ' + '23:59:59',
				perPage: 500
			});
			if (res.data.code == 200) {
				this.warnings = res.data.data.list;
				this.$store.dispatch('smessyjListasyn', this.warnings.length);
			}
		}
	}
};
</script>

<style scoped>
.hp-1 {
	height: 100px;
	/* overflow: auto; */
}
.main {
	position: relative;
	border: 1px solid #192856;
	padding: 12px;
	box-sizing: border-box;
}

.ealuy {
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.tablebox {
	color: #fff;
	/* table-layout: fixed;
  width: 100%; */
	/* 设置最小高度，根据需要调整数值 */
}
.tablebox .thead-fixed {
	position: sticky;

	/* table-layout: fixed; */
}

.colorAll {
	/* padding: 6px; */
	background-color: rgb(0, 94, 169);
	margin-left: 2px;
	text-align: center;
}
/* .colorAlls {
  padding: 6px;
  background-color: rgb(4, 52, 95);
  margin-left: 5px;
  text-align: center;
} */
.tablebox {
	text-align: center;
	border-spacing: 3px 0;
}
.tablebox tr:first-child {
	background-color: #005ea9;
	height: 35px;
}

/* 偶数改变颜色 */
.tablebox tr:nth-child(even) {
	background-color: #09284b;
}
/* 奇数改变颜色 */
.tablebox tr:nth-child(odd) {
	background-color: #04345f;
}

.table-wrapper {
	height: 77%; /* 设置表格区域的固定高度 */
	overflow: hidden;
	/* overflow-y: auto; */
}
.table-wrappers {
	height: 100%; /* 设置表格区域的固定高度 */
	overflow: hidden;
	/* overflow-y: auto; */
}
/* 固定表头在顶部 */
.tablebox thead {
	position: sticky;
	top: 0;
	z-index: 1;
}

/* 将滚动动画应用到表格的样式 */

.tablebox {
	table-layout: fixed;
	width: 100%;
}

.tablebox th {
	position: sticky;
	top: 0;
	/* background-color: #f2f2f2; */
	z-index: 100; /* 确保表头位于顶部 */
}

.tablebox tr:hover {
	background-color: rgba(184, 180, 180, 0.3); /* 这里设置背景颜色，根据需要调整 */
	cursor: pointer;
}

.timeAll {
	width: 22%;
}
.event {
	width: 30%;
}
.centets1 {
	width: 26%;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.centets2 {
	width: 14%;
}
.centets {
	/* width: 30%; */
	padding: 8px;
	box-sizing: border-box;
}
.events {
	width: 25px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	padding: 0px 2px 0px 2px;
	font-weight: bold;
}
.events1 {
	white-space: nowrap;
	font-size: 13px;
	line-height: 30px;
	padding: 0px 2px 0px 2px;
	box-sizing: border-box;
}
.main-border {
	border: 1px solid #202d56;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	min-height: 425px;
}

.disFlexItem {
	display: flex;
	justify-items: center;
	justify-content: space-between;
}

.m-b-12 {
	margin-bottom: 20px;
}

.tit {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	flex-shrink: 0;
}

.red-s {
	color: red;
}
.orange-s {
	color: orange;
}

.yellow-s {
	color: yellow;
}

.main span:nth-child(1) {
	position: absolute;
	left: -1px;
	top: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 2px 0 0 2px;
}

.main span:nth-child(2) {
	position: absolute;
	right: -1px;
	top: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 2px 2px 0 0;
}

.main span:nth-child(3) {
	position: absolute;
	right: -1px;
	bottom: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 0 2px 2px 0;
}

.main span:nth-child(4) {
	position: absolute;
	left: -1px;
	bottom: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 0 0 2px 2px;
}

.flex {
	display: flex;
}
.hp-1 {
	height: 40px;
	/* overflow: auto; */
}
.table-lie {
	border: 1px solid #ccc;
	padding: 10px;
}

.mt-1-5 {
	margin-top: 1.5rem;
}
.c-l-b,
.c-l-t {
	height: 100%;
}
.post {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 222;
}
</style>
